export const baseUsage = `
import {PhNav,PhNavItem,PhSubNav} from 'phoeon'
interface Nav{
    current:{
        type:[String,Number]
    },
    @navigate :(action:string)=>void //代理子元素导航事件
}
interface SubNav{
    title:{
        type:String
    },
    hover:{
        type:Boolean,
        default:true //子菜单展开的事件，默认为hover false->click
    }
}
interface NavItem{
    action:{
        type:String,//item 唯一标识,
        default:""
    },
    icon:{
        type:String
    },
    @navigate :(action:string)=>void  //导航事件
}
`;
export const demo = `
<ph-nav @navigate="onNavigate" :current="cnav" theme="dark">
    <ph-sub-nav title="浏览器">
    <ph-nav-item action="chrome" icon="chrome">谷歌</ph-nav-item>
    <ph-nav-item action="firefox" icon="firefox">火狐</ph-nav-item>
    <ph-nav-item action="safari" icon="safari">苹果</ph-nav-item>
    <ph-nav-item action="ie" icon="internet-explorer">IE</ph-nav-item>
    </ph-sub-nav>
    <ph-nav-item action="/nav"> 导航 </ph-nav-item>
</ph-nav>
`;
export const script = `
import { defineComponent, ref } from 'vue'
import {PhNav,PhNavItem,PhSubNav} from 'phoeon'

export default defineComponent({
    components:{PhNav,PhNavItem,PhSubNav} ,
    setup(){
        const cnav=ref("/nav")
        const onNavigate = (v:string)=>{
            cnav.value = v
        }
        return {
            cnav,
            onNavigate
        }
    }
})
`;
